<template>
  <div>
    <el-row class="mb">
      <el-col :span="6" class="pr">
        <el-card
          class="card-tip"
          shadow="always"
          style="background-color: #5470c6"
        >
          <div class="title">
            <span>用户统计</span>
            <el-tag size="mini" style="color: #5470c6">实时</el-tag>
          </div>
          <div class="count">29</div>
          <div class="tip">当前总用户数量</div>
        </el-card>
      </el-col>
      <el-col :span="6" class="pr pl">
        <el-card
          class="card-tip"
          shadow="always"
          style="background-color: #9a60b4"
        >
          <div class="title">
            <span>商品统计</span>
            <el-tag size="mini" style="color: #9a60b4">实时</el-tag>
          </div>
          <div class="count">918</div>
          <div class="tip">当前总商品数量</div>
        </el-card>
      </el-col>
      <el-col :span="6" class="pr pl">
        <el-card
          class="card-tip"
          shadow="always"
          style="background-color: #3ba272"
        >
          <div class="title">
            <span>订单统计</span>
            <el-tag size="mini" style="color: #3ba272">实时</el-tag>
          </div>
          <div class="count">29</div>
          <div class="tip">当前总订单数量</div>
        </el-card>
      </el-col>
      <el-col :span="6" class="pl">
        <el-card
          class="card-tip"
          shadow="always"
          style="background-color: #fc8452"
        >
          <div class="title">
            <span>销售统计</span>
            <el-tag size="mini" style="color: #fc8452">实时</el-tag>
          </div>
          <div class="count">2075</div>
          <div class="tip">当前总销售数量</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="pr">
        <el-card shadow="always">
          <div class="region" ref="user"></div>
        </el-card>
      </el-col>
      <el-col :span="12" class="pl">
        <el-card shadow="always">
          <div class="region" ref="page"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  methods:{
    async initReportOne(){
      try {
        // 初始化图表
        this.$userChart = echarts.init(this.$refs.user);
        this.$userChart.showLoading();

        let res = await this.$api.getReport(1)
        res.title = {
          text: '用户来源数据',
          left:'center'
        }
        res.dataZoom = {}
        res.tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
          }
        }
        res.grid = {
          top:'100',
          left: '20',
          right: '20',
          bottom: '20',
          containLabel: true
        }
        res.legend.top = 50
        
        this.$userChart.setOption(res)
        
        this.$userChart.hideLoading();

      } catch (error) {
        console.log("WelcomeView-initReportOne",error)
      }
    }
  },
  mounted(){
    this.initReportOne()

    this.$resizeCallBack = ()=>{
      this.$userChart.resize();
    }
    window.addEventListener("resize",this.$resizeCallBack)
  },
  destroyed(){
    window.removeEventListener("resize",this.$resizeCallBack)
  }
};
</script>
<style lang="less" scoped>
.region,
.pages {
  width: 100%;
  height: 500px;
}
.mb {
  margin-bottom: 20px;
}
.pl {
  padding-left: 10px;
}
.pr {
  padding-right: 10px;
}
.card-tip {
  color: white;
}
.card-tip::v-deep .el-card__body {
  padding: 10px 10px;
}
.card-tip .title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  font-weight: bold;
  font-size: 14px;
}
.card-tip .count {
  font-size: 30px;
  text-align: center;
  padding: 8px 0px;
}
.card-tip .tip {
  font-size: 12px;
}
</style>